<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/xadmin.js"></script>
<link rel="stylesheet" href="<%=basePath%>css/font.css">
<link rel="stylesheet" href="<%=basePath%>css/xadmin.css">
<script src="<%=basePath%>lib/layui/layui.js" charset="utf-8"></script>
<script src="<%=basePath%>js/pc/admin/friendlyLinks.js" charset="utf-8"></script>
<script src="<%=basePath%>js/echarts.js" charset="utf-8"></script>
<link rel="stylesheet" href="<%=basePath%>lib/layui/css/layui.css"
	media="all">
</head>
<body class="layui-anim layui-anim-up">
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a id="aCalss">综合统计</a> <a>
				<cite>导航元素</cite>
		</a>
		</span>  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height: 35px;"></i></a>
	</div>
	<script type="text/javascript">
		$.post(
						"QueryAllGoods.do",
						function(data) {
							var a = "<option value='' selected=\"selected\">请选择商品</option>";
							for (var i = 0; i < data.data.length; i++) {
								a += "<option value="+data.data[i].cId+">"
										+ data.data[i].cName + "</option>"
							}
							$("#cName").html(a);
						}, "json")
	</script>
	<fieldset class="layui-elem-quote">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<select id="cName" name="cName">
					</select>
				</div>
				<div class="layui-input-inline">
					<!-- <input type="tel" placeholder="请选择开始时间" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"> -->
					<input id="type3" type="text" name="date" lay-verify="date"
						placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<input id="type4" type="text" name="date" lay-verify="date"
						placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
				</div>
				<a class="layui-btn" onclick="selectALL()">查询</a>
			</div>
		</form>
	</fieldset>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div style="width: 100%; height: 400px;">
		<div id="eichartscontainer" style="width: 100%; height: 400px;"></div>
	</div>
	<script type="text/javascript">
		var mychartcc = echarts.init(document
				.getElementById('eichartscontainer'));
		mychartcc.setOption({
			title : {
				text : '',
				subtext : '销售统计',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : [ '' ]
			},
			series : [ {
				name : '',
				type : 'pie',
				radius : '55%',
				//center: ['50%', '60%'],
				data : [ {
					value : 0,
					name : ''
				} ],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			} ]
		});
	</script>
	<script type="text/javascript">
		function selectALL() {
			//查询
			var cName = $("#cName").val();
			var cNames = $("#cName option:selected").text();
			if (cName == "") {
				alert("请选择要查询的商品名称");
				return;
			}
			var type3 = $("#type3").val();//起始时间
			var type4 = $("#type4").val();//结束时间
			var start = new Date(type3.replace("-", "/").replace("-", "/"));
			var end = new Date(type4.replace("-", "/").replace("-", "/"));
			if (start > end) {
				layer.alert("起始时间不能大于结束时间");
				return;
			} else {
				$.post("findcomprehensiveStatistics.do", {
					cName : cName,
					cNames : cNames,
					type3 : type3,
					type4 : type4
				}, function(data) {
					var mychartcc = echarts.init(document
							.getElementById('eichartscontainer'));
					mychartcc.setOption({
						title : {
							text : '',
							subtext : '销售统计',
							x : 'center'
						},
						tooltip : {
							trigger : 'item',
							formatter : "{a} <br/>{b} : {c} ({d}%)"
						},
						legend : {
							orient : 'vertical',
							left : 'left',
							data : data.data.list
						},
						series : [ {
							name : '访问来源',
							type : 'pie',
							radius : '55%',
							center : [ '50%', '60%' ],
							data :data.data.list2,
							itemStyle : {
								emphasis : {
									shadowBlur : 10,
									shadowOffsetX : 0,
									shadowColor : 'rgba(0, 0, 0, 0.5)'
								}
							}
						} ]
					});
				}, "json")
			}
		}
		layui
				.use(
						[ 'form', 'layedit', 'laydate' ],
						function() {
							var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
							//日期
							laydate.render({
								elem : '#type3'
							});
							laydate.render({
								elem : '#type4'
							});
						});
		$(function() {
			init();
		})
		function init() {
			layui.use('table', function() {
				var table = layui.table;
				table.render({
					height : 20
				});
			});
		}
	</script>
</html>